<script setup lang="ts">
  import { ref } from 'vue'
  import CONFIG from '@/config'
  import { linkRoomModule, getRoomInfo, endRoomModule, heartBeatModule, isloading } from '@/module/room'

  const code = ref(CONFIG.CODE)
  const titleUrl = ref(CONFIG.TITLE_IMAGE)
  
  //请求连接直播间，并发送心跳包
  const linkRoom = () => {
    //loading
    isloading.value = true
    //获取房间信息 + 启动socket
    //本来想分开写，但是房间信息还没获取完就开始openSSW了,只好写在post里面
    linkRoomModule(code.value)
    //openSSW(getRoomInfo())
  }
  
</script>


<template>  
    <div class="codeForm" :style="{boxShadow: `var(--el-box-shadow-dark)`}"  >
      <!-- 标题 -->
      <el-row justify="center" align="middle" class="codeTitle" >
        <el-col :span="24">
            <el-image :src="titleUrl" class = "title-image" :span="24" fit="none" ></el-image>
        </el-col>
      </el-row>

      <!-- 直播码输入框 -->
      <el-row justify="center" align="middle" class="codeInput" >
        <el-col :span="12">
          <el-input v-model="code">
            <template #prepend style="color: black">身份码</template>
          </el-input>
        </el-col>
      </el-row>

      <!-- 连接按钮 -->
      <el-row justify="center" align="middle" class="codeBtn" >
        <el-col :span="6" v-if="!isloading">
          <el-button type="primary" @click="linkRoom()" >开启玩法</el-button>
        </el-col>
        <el-col :span="6" v-if="isloading">
          <el-button type="primary" @click="linkRoom()" loading>开启玩法</el-button>
        </el-col>
        <!-- <el-col :span="6">
          <el-button type="primary" @click="endRoom()" >点击关闭连接</el-button>
        </el-col> -->
      </el-row>
    </div>
</template>

<style scoped>
 
  .codeForm{
    background-color: rgb(255, 255, 255);
    width: 600px;
    height: 280px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 10px;
    margin-left: -300px;
    margin-top: -180px;
  }
  .codeInput{
    padding-top: 50px;
  }
  .codeBtn{
    padding-top: 30px;
    padding-bottom: 100px;
  }
  .title-image{
    margin-top: -40px;
  }
</style>
